<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-20 14:09  --
--  @version: 1.0              --
-------------------------------->
<!-- 预警处理 -->

<template>
  <el-breadcrumb :separator-icon="DArrowRight" style='font: normal bold 1.1rem "Fira Sans", serif;'>
    <el-breadcrumb-item v-for="(item, index) in items" :key="index">{{ item }}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider/>

  <!--  表单  -->
  <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="editRules"
      label-width="150px"
      class="demo-ruleForm"
  >
    <el-form-item label="生产产线" prop="productionLine">
      <el-input v-model="dialogForm.productionLine" disabled/>
    </el-form-item>

    <el-form-item label="机床名称" prop="machineName">
      <el-input v-model="dialogForm.machineName" disabled/>
    </el-form-item>

    <el-form-item label="设备Id" prop="deviceGuid">
      <el-input v-model="dialogForm.deviceGuid" disabled/>
    </el-form-item>

    <el-form-item label="图片" prop="photoUrl">
      <el-input v-model="dialogForm.photoUrl" />
    </el-form-item>

    <el-form-item label="预警说明" prop="alarmDesc">
      <el-input v-model="dialogForm.alarmDesc" />
    </el-form-item>
  </el-form>

  <span class="dialog-footer">
    <el-button @click="handleClose">取消</el-button>
    <el-button type="primary" @click="handleConfirm(dialogFormRef)">确定</el-button>
  </span>

</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {DArrowRight} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {SUCCESS} from "@/utils/constants.ts";
import {RespResult} from "@/api";
import {getAlarmRecordById, handlerAlarmRecord} from "@/api/crash/alarmRecord.ts";
import {validatorInput} from "@/validator";
import router from "@/router";

const breadcrumb: any = useRoute().meta.title;
const items: string[] = breadcrumb.split(",");

/*表单绑定*/
const dialogForm = ref({
  id: 0,
  productionLine: "",
  machineName: "",
  deviceGuid: "",
  photoUrl: "",
  alarmDesc: "",
});

const dialogFormRef = ref<FormInstance>();

/*input输入框规则校验*/
const editRules = reactive<FormRules<typeof dialogForm>>({
  photoUrl: [{validator: validatorInput, required: true, trigger: 'blur'}],
  alarmDesc: [{validator: validatorInput, required: true, trigger: 'blur'}],
})


/*详情数据*/
onMounted(() => {
  // 获取参数并初始化
  initAlarmRecordData(useRoute().query.id);
})

const initAlarmRecordData = async (id: any) => {
  //发送请求
  await getAlarmRecordById({id: id}).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          const data = JSON.parse(response.data)
          // 初始化数据
          dialogForm.value.id = id;
          dialogForm.value.productionLine = data.productionLine;
          dialogForm.value.machineName = data.machineName;
          dialogForm.value.deviceGuid = data.deviceGuid;
          dialogForm.value.photoUrl = data.photoUrl;
          dialogForm.value.alarmDesc = data.alarmDesc;
        } else {
          ElMessage({
            message: "获取数据失败",
            type: 'error'
          })
        }
      }
  )
}
/*关闭弹出框*/
const handleClose = () => {
  // 页面跳转
  router.push({path: "/alarmDesc", query: {deviceGuid: dialogForm.value.deviceGuid}});
}

/*确认提交*/
const handleConfirm =(formEl: FormInstance | undefined) => {
  if(!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      await handlerAlarmRecord(JSON.stringify(dialogForm.value)).then(
          (response:RespResult) => {
            if (response.code === SUCCESS) {
              ElMessage({
                message: response.message,
                type: "success"
              })
              // 页面跳转
              router.push({path: "/alarmDesc", query: {deviceGuid: dialogForm.value.deviceGuid}});
            } else {
              ElMessage({
                message: response.message,
                type: "error"
              })
            }

          }
      )
    } else {
      return false;
    }
  })
}
</script>

<style scoped>

</style>